<script setup lang="ts">
import { computed, defineComponent, h } from 'vue';

import {
  CheckCircleOutlined,
  CloseCircleOutlined,
} from '@ant-design/icons-vue';
import { Space, Tag } from 'ant-design-vue';

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});
const contentInfp = computed(() => getIsMIwenStatus(props.list));
function getIsMIwenStatus(list: any) {
  const errContent = {
    color: 'red',
    text: h(Space, {}, [
      h('div', {}, '该货源'),
      h(
        CloseCircleOutlined,
        {
          style: {
            color: 'red',
          },
        },
        () => {},
      ),
      h('div', {}, '不支持'),
      h(
        Tag,
        {
          color: 'red',
        },
        '密文下单',
      ),
    ]),
    ic: CloseCircleOutlined,
  };
  const successContent = {
    color: 'green',
    text: h(Space, {}, [
      h('div', {}, '该货源'),
      h(
        CheckCircleOutlined,
        {
          style: {
            color: 'green',
          },
        },
        () => {},
      ),
      h('div', {}, '支持'),
      h(
        Tag,
        {
          color: 'green',
        },
        '密文下单',
      ),
    ]),
    ic: CheckCircleOutlined,
  };
  const miwentag = 'douyin';
  if (!list) {
    return errContent;
  }
  return list?.includes(miwentag) ? successContent : errContent;
}
const VIconNode = defineComponent({
  props: {
    vnodes: {
      type: Object,
      required: true,
    },
  },
  render() {
    return h(this.vnodes, {}, () => '');
  },
});
</script>

<template>
  <a-popover :content="contentInfp.text">
    <!-- <template #content> <VIconNode :vnodes="contentInfp.text" /></template> -->
    <a-tag :color="contentInfp.color">
      <VIconNode :vnodes="contentInfp.ic" />
      密文
    </a-tag>
  </a-popover>
</template>
